<template>
  <!-- 悬浮导航 -->
  <div>
    <div class="right-nav-box">
      <!-- 前5个按钮 -->
      <div
        style="font-size: 35px"
        v-for="(item, index) in MenuList"
        :key="index"
      >
        <el-icon><component :is="item.icon"></component></el-icon>
        <span style="font-size: 15px; margin-top: 10px">{{ item.title }}</span>
      </div>
      <!-- 购物车 -->
      <div style="font-size: 35px" @click="toShopCart">
       <el-badge :value="this.$store.state.shopCart.length" class="item" v-show="this.$store.state.shopCart.length">
        <el-icon><ShoppingCartFull /></el-icon>
        <span style="font-size: 15px; margin-top: 10px">购物车</span>
        </el-badge>
        <div  v-show="!this.$store.state.shopCart.length">
          <el-icon><ShoppingCartFull /></el-icon>
        <span style="font-size: 15px; margin-top: 10px">购物车</span>
        </div>
      </div>
      <!-- 返回顶部按钮 -->
      <el-backtop
        style="position: absolute; bottom: -100px; left: 0px; color: #000"
      >
        <div
          style="
            height: 100%;
            width: 100%;
            background-color: var(--el-bg-color-overlay);
            box-shadow: var(--el-box-shadow-lighter);
            text-align: center;
          "
        >
          UP
        </div>
      </el-backtop>
    </div>
  </div>
</template>

<script>
import {
  Iphone,
  User,
  Setting,
  Headset,
  ShoppingCartFull,
  Top,
} from "@element-plus/icons";
export default {
  components: {
    Iphone,
    User,
    Setting,
    Headset,
    ShoppingCartFull,
    Top,
  },
  data() {
    return {
      btnFlag: false,
      MenuList: [
        {
          title: "手机App",
          icon: "Iphone",
        },
        {
          title: "个人中心",
          icon: "User",
        },
        {
          title: "售后服务",
          icon: "Setting",
        },
        {
          title: "人工服务",
          icon: "Headset",
        },
      ],
    };
  },
  methods:{
    toShopCart(){
      this.$router.push('/cart')
    }
  }
};
</script>

<style scoped>
.right-nav-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: 15px;
  bottom: 150px;
  background: #ffffff;
}
.right-nav-box div {
  display: block;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid #f5f5f5;
  align-items: center;
  width: 82px;
  height: 90px;
}
.right-nav-box :hover {
  color: #ff6700;
}
</style>